<template>
  <section class="main">
    <div class="order">
      <orderTopBar />
      <van-tabs v-model="active"
                swipeable
                sticky>
        <van-tab title="全部"
                 name="a">
          <tabContent1 />
        </van-tab>
        <van-tab title="待付款"
                 name="b">
          <tabContent2 />
        </van-tab>
        <van-tab title="待收货"
                 name="c">
          <tabContent3 />
        </van-tab>
        <van-tab title="已完成"
                 name="d">
          <tabContent4 />
        </van-tab>
      </van-tabs>

    </div>
  </section>
</template>
<script>
import orderTopBar from "../components/orderTopBar"
import tabContent1 from "../components/tabContent1"
import tabContent2 from "../components/tabContent2"
import tabContent3 from "../components/tabContent3"
import tabContent4 from "../components/tabContent4"
export default {
  data () {
    return {
      active: 0
    }
  },
  components: {
    orderTopBar, tabContent1, tabContent2, tabContent3, tabContent4
  }
}
</script>
<style scoped>
.order {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.van-tabs {
  flex: 1;
  display: flex;
  flex-flow: column;
}
.tabContent {
  overflow-y: auto;
}
</style>